<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>360拖拽相册</title>
    <style>
        .box{
            perspective: 2000px;
            transform:rotateX(-20deg);    
        }
        @keyframes a{
            100%{
                transform: translateZ(100px) rotateX(-20deg) rotateY(360deg);
            }
        }
        #wrapper{
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            margin: 200px auto;
            position: relative;
            transform: translateZ(100px) rotateX(-20deg) rotateY(0deg);
            /*animation: a 10s linear infinite;*/
        }
        #wrapper div{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 1px solid #000;
            overflow: hidden;
        }
    </style>
</head>
<body>
   <div class="box">
        <div id='wrapper'>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </div>
   </div>
    <script>
        var wrapper = document.getElementById('wrapper');
        var divs = wrapper.getElementsByTagName('div');
        for(var i = 0, max= divs.length;i<max;i++){
            divs[i].style.transform = 'rotateY('+(360/max)*(i)+'deg) translateZ(400px)';
            divs[i].style.background = 'url(img/pic'+((i%6)+1)+'.jpg)';
            divs[i].index=i;
            divs[i].onclick = function(){
                 for(var f = 0, max1= divs.length;f<max1;f++){
                     divs[f].style.transform = ' rotateY('+(360/max1)*(f)+'deg) translateZ(400px) scale(1)';
                 }
                this.style.transform = ' rotateY('+(360/max)*(this.index)+'deg) translateZ(600px) scale(1.2) ';
                  wrapper.style.transform = " translateZ(100px) rotateX(-20deg) rotateY("+(-360/max)*(this.index)+"deg)";
                console.log(1);
            }
        }
        
        var rotY = 0;
        var rotX = 0;

        document.onmousedown = function(e){
               var disX = e.clientX;
            var disY = e.clientY;
            e.preventDefault();
            document.onmousemove = function(e){
                var x = e.clientX;
                var y = e.clientY;
                console.log(x - disX,y - disY);
                rotX -= (y - disY) * 0.2;
                rotY += (x - disX) * 0.2;
                // var rotY = 0;
                wrapper.style.transform = "rotateX("+ rotX +"deg) rotateY("+rotY+"deg)";
                disX = x;
                disY = y;
            }

        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    </script>
</body>
</html>